<template>
  <!-- 专利列表 -->
  <div class="card-box">
    <template v-if="isHavePatent===true">
      <p class="no-patent-tip">未发现此公司的科技信息，请查看其他信息。</p>
    </template>
    <template v-else>
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">专利列表</span>
        </div>
        <el-col :span="24">
          <ul class="tab-info-title clearfix">
            <li style="margin-right: 20px">
              <span>专利类型：</span>
              <span>
                <el-select
                  v-model="na"
                  size="medium"
                  class="elselect"
                  @change="cl(0, na)"
                  :loading="loading"
                  @visible-change="visibleChange(0, 'na')"
                  placeholder="专利类型"
                >
                  <el-option
                    v-for="item in selectDataList[0].list"
                    :key="item.name"
                    :label="
                      item.name !== '全部'
                        ? `${item.key}（${item.doc_count}）`
                        : item.fullName
                    "
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </span>
            </li>
            <li style="margin-right: 20px">
              <span>申请日：</span>
              <span>
                <el-select
                  v-model="apd"
                  :loading="loading"
                  size="medium"
                  @change="cl(1, apd)"
                  @visible-change="visibleChange(1, 'apd')"
                  placeholder="申请日"
                >
                  <el-option
                    v-for="item in selectDataList[1].list"
                    :key="item.name"
                    :label="
                      item.name !== '全部'
                        ? `${item.key_as_string}（${item.doc_count}）`
                        : item.name
                    "
                    :value="item.key_as_string"
                  >
                  </el-option>
                </el-select>
              </span>
            </li>
            <li style="margin-right: 20px">
              <span>公开/公告日：</span>
              <span>
                <el-select
                  v-model="isd"
                  :loading="loading"
                  size="medium"
                  @change="cl(2, isd)"
                  @visible-change="visibleChange(2, 'isd')"
                  placeholder="公开/公告日"
                >
                  <el-option
                    v-for="item in selectDataList[2].list"
                    :key="item.name"
                    :label="
                      item.name !== '全部'
                        ? `${item.key_as_string}（${item.doc_count}）`
                        : item.name
                    "
                    :value="item.key_as_string"
                  >
                  </el-option>
                </el-select>
              </span>
            </li>
            <li style="margin-right: 20px">
              <span>法律状态：</span>
              <span>
                <el-select
                  v-model="ls"
                  :loading="loading"
                  size="medium"
                  class="elselect"
                  @change="cl(5, ls)"
                  @visible-change="visibleChange(5, 'ls')"
                  placeholder="法律状态"
                >
                  <el-option
                    v-for="item in selectDataList[5].list"
                    :key="item.name"
                    :label="
                      item.name !== '全部'
                        ? `${item.key}（${item.doc_count}）`
                        : item.name
                    "
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </span>
            </li>
            <li>
              <span>IPC分类：</span>
              <span>
                <el-select
                  v-model="icl"
                  :loading="loading"
                  size="medium"
                  class="elselect"
                  @change="cl(6, icl)"
                  @visible-change="visibleChange(6, 'icl')"
                  placeholder="IPC分类"
                >
                  <el-option
                    v-for="item in selectDataList[6].list"
                    :key="item.name"
                    :label="
                      item.name !== '全部'
                        ? `${item.key}（${item.doc_count}）`
                        : item.name
                    "
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </span>
            </li>
            <li style="margin-left: 20px">
              <el-button type="primary" class="vtab-active" @click="reset"
                >重置</el-button
              >
            </li>
          </ul>
        </el-col>
        <el-col :span="24" v-loading="show">
          <!-- 列表 -->
          <ul class="disputes-list">
            <li v-for="(item, index) in listData" :key="index">
              <h3>
                <p>
                  <router-link
                    v-show="isTranslate[index] === 'false'"
                    :to="{
                      name:
                        $route.name === 'evalPartentList'
                          ? 'evalPatentDetail'
                          : 'patentDetail',
                      query: {
                        pn: item.pn,
                        active: 1,
                        name: $route.query.name,
                        eid: $route.query.eid,
                      },
                    }"
                    tag="span"
                    v-html="item.title"
                  ></router-link>
                  <router-link
                    v-show="isTranslate[index] === 'true'"
                    :to="{
                      name:
                        $route.name === 'evalPartentList'
                          ? 'evalPatentDetail'
                          : 'patentDetail',
                      query: {
                        pn: item.pn,
                        active: 1,
                        name: $route.query.name,
                        eid: $route.query.eid,
                      },
                    }"
                    tag="span"
                    >{{ item.transT }}</router-link
                  >
                  <i class="translation" @click="translation(item, index)">译</i>
                </p>
                <span class="score high">价值评分：
                  <template v-if="item.pantentScore&&item.pantentScore>0">
                    {{ item.pantentScore }}分
                  </template>
                  <template v-else>-</template>
                </span>
                <!-- <i v-if="item.pantentScore >= 30" class="high"
                  >价值评分：{{ item.pantentScore }}分</i
                >
                <i
                  v-if="item.pantentScore < 30 && item.pantentScore > 0"
                  class="low"
                  >价值评分：{{ item.pantentScore }}分</i
                > -->
              </h3>
              <p class="clearfix">
                <span class="light"
                  ><a style="width: 50px; color: #95959f">申请号：</a
                  ><a class="fontColor">{{ item.apn }}</a></span
                >
                <span>申请日：{{ item.ad }}</span>
                <span class="light"
                  ><a style="width: 50px; color: #95959f">申请人：</a
                  ><a class="fontColor" style="width: 80%">{{
                    item.an.toString()
                  }}</a></span
                >
                <span>IPC：{{ item.ipcm }}</span>
              </p>
              <p class="clearfix">
                <span
                  >专利类型：<i>{{ item.patent_type }}</i></span
                >
                <span>公开日：{{ item.isd }}</span>
                <span class="light"
                  ><a style="width: 50px; color: #95959f">发明人：</a
                  ><a class="fontColor">{{ item.inventor.toString() }}</a></span
                >
                <span v-if="item.legal_status !== ''"
                  >法律状态：{{ item.legal_status }}</span
                >
              </p>
            </li>
          </ul>
          <div class="pagination">
            <el-pagination
              background
              :total="total"
              :page-size="ips"
              layout="prev, pager, next"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <router-view></router-view>
        </el-col>
      </el-card>
    </template>
  </div>
</template>
<script>
import { xmlEscape } from "@/utils/utils";
export default {
  data() {
    return {
      isHavePatent: null, // 是否有专利
      companyName: this.$route.query.name || "",
      na: "",
      apd: "",
      isd: "",
      ls: "",
      icl: "",
      clName: "",
      current: "",
      activeName: "",
      patentTypeName: "0",
      ights: true,
      owns: false,
      isdown: true,
      total: 0,
      listData: [],
      ips: 10,
      currentPage: 1,
      isShowScreen: false,
      selectDataList: [
        {
          name: "专利类型",
          code: "na",
          list: [],
        },
        {
          name: "申请日",
          code: "apd",
          list: [],
        },
        {
          name: "公开/公告日",
          code: "isd",
          list: [],
        },

        {
          name: "申请人",
          code: "an",
          list: [],
        },
        {
          name: "发明人",
          code: "in",
          list: [],
        },
        {
          name: "法律状态",
          code: "ls",
          list: [],
        },
        {
          name: "IPC分类",
          code: "icl",
          list: [],
        },
      ],
      translationList: [],
      isTranslate: [],
      show: false,
      loading: false,
    };
  },
  mounted() {
    this.na = "";
    this.apd = "";
    this.isd = "";
    this.ls = "";
    this.icl = "";
    this.total = 0;
    this.show = false;
    this.loading = false;
    this.listData = [];
    this.ips = 10;
    this.currentPage = 1;
    this.selectDataList = [
      {
        name: "专利类型",
        code: "na",
        list: [],
      },
      {
        name: "申请日",
        code: "apd",
        list: [],
      },
      {
        name: "公开/公告日",
        code: "isd",
        list: [],
      },

      {
        name: "申请人",
        code: "an",
        list: [],
      },
      {
        name: "发明人",
        code: "in",
        list: [],
      },
      {
        name: "法律状态",
        code: "ls",
        list: [],
      },
      {
        name: "IPC分类",
        code: "icl",
        list: [],
      },
    ];
    
    if (this.$route.query.isHavePatent) {
      this.isHavePatent = this.$route.query.isHavePatent==='true' ? true : false
    }
    if (!this.isHavePatent) {
      this.getAjaxData({}, []);
    }
  },
  activated() {},
  methods: {
    // 重置
    reset() {
      if (
        this.na == "" &&
        this.apd == "" &&
        this.isd == "" &&
        this.ls == "" &&
        this.icl == ""
      ) {
        return;
      }
      this.na = "";
      this.apd = "";
      this.isd = "";
      this.ls = "";
      this.icl = "";
      this.total = 0;
      this.show = false;
      this.listData = [];
      this.ips = 10;
      this.currentPage = 1;
      this.selectDataList = [
        {
          name: "专利类型",
          code: "na",
          list: [],
        },
        {
          name: "申请日",
          code: "apd",
          list: [],
        },
        {
          name: "公开/公告日",
          code: "isd",
          list: [],
        },

        {
          name: "申请人",
          code: "an",
          list: [],
        },
        {
          name: "发明人",
          code: "in",
          list: [],
        },
        {
          name: "法律状态",
          code: "ls",
          list: [],
        },
        {
          name: "IPC分类",
          code: "icl",
          list: [],
        },
      ];
      this.mustAndrandarr();
    },
    // 筛选项查询
    cl(index, name) {
      this.currentPage = 1;
      this.current = index;
      // 选择全部则sq需要传空
      /**if(name.fullName==='全部'||name.name==='全部'||name==='全部') {
        this.clName = ''
      }else if(typeof name==='object'){
        // 专利类型比较特殊，需要传数据中的name，name是数字，其他筛选正常传name，name是名称
        this.clName = name.name
      }else{
        this.clName = name
      }**/
      this.mustAndrandarr();
    },
    // 更改页条数
    /**handleSizeChange(val) {
      this.ips = val
      this.mustAndrandarr()
    },**/
    // 翻页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.mustAndrandarr();
    },
    mustAndrandarr() {
      this.show = true;
      let arr = [
        { value: this.na, key: "this.na" },
        { value: this.ls, key: "this.ls" },
        { value: this.icl, key: "this.icl" },
        { value: this.apd, key: "this.apd" }, // 申请日
        { value: this.isd, key: "this.isd" }, // 公开日
      ];
      let arrNum = {};
      let date = [];
      for (let i in arr) {
        if (
          arr[i].value !== undefined &&
          arr[i].value !== "" &&
          arr[i].value !== null
        ) {
          if (arr[i].key === "this.na") {
            // 专利类型
            arrNum.patent_type = arr[i].value;
          } else if (arr[i].key === "this.ls") {
            // 法律状态
            if (arr[i].value === "其它") {
              arrNum.legal_status = "";
            } else {
              arrNum.legal_status = arr[i].value;
            }
          } else if (arr[i].key === "this.icl") {
            // ipc
            arrNum.ipcm = arr[i].value;
          } else if (arr[i].key === "this.apd") {
            // 申请日
            date.push({
              field: "ad", // isd公开日 ad 申请日
              start: (arr[i].value ? arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ? arr[i].value : "2023") + "-12-31",
            });
          } else if (arr[i].key === "this.isd") {
            // 公开日
            date.push({
              field: "isd", // isd公开日 ad 申请日
              start: (arr[i].value ? arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ? arr[i].value : "2023") + "-12-31"
            });
          }
        }
      }
      this.getAjaxData(arrNum, date);
    },
    visibleChange(index, code) {
      //if(this.selectDataList[index].list.length<=0){
      this.loading = true;
      this.getCheckedList(index, code);
      //}
    },
    getCheckedList(index, code) {
      let arr = [
        { value: this.na, key: "this.na" },
        { value: this.ls, key: "this.ls" },
        { value: this.icl, key: "this.icl" },
        { value: this.apd, key: "this.apd" }, // 申请日
        { value: this.isd, key: "this.isd" }, // 公开日
      ];
      let arrNum = { date_sort: "1" };
      let date = [];
      for (let i in arr) {
        if (
          arr[i].value !== undefined &&
          arr[i].value !== "" &&
          arr[i].value !== null
        ) {
          if (arr[i].key === "this.na") {
            // 专利类型
            arrNum.patent_type = arr[i].value;
          } else if (arr[i].key === "this.ls") {
            // 法律状态
            if (arr[i].value === "其它") {
              arrNum.legal_status = "";
            } else {
              arrNum.legal_status = arr[i].value;
            }
          } else if (arr[i].key === "this.icl") {
            // ipc
            arrNum.ipcm = arr[i].value;
          } else if (arr[i].key === "this.apd") {
            // 申请日
            date.push({
              field: "ad", // isd公开日 ad 申请日
              start:(arr[i].value ? arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ? arr[i].value : "2023") + "-12-31",
            });
          } else if (arr[i].key === "this.isd") {
            // 公开日
            date.push({
              field: "isd", // isd公开日 ad 申请日
              start: (arr[i].value ? arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ? arr[i].value : "2023") + "-12-31",
            });
          }
        }
      }
      let aggJson = {};
      if (index === 0) {
        aggJson = {
          //发明类型聚类
          size: "20",
          field: "patent_type",
          interval: "",
          format: "",
          type: "base",
        };
      } else if (index === 1) {
        aggJson = {
          // 申请日聚类
          size: "",
          field: "ad",
          interval: "YEAR",
          format: "yyyy",
          type: "date",
        };
      } else if (index === 2) {
        aggJson = {
          // 公开日聚类
          size: "",
          field: "isd",
          interval: "YEAR",
          format: "yyyy",
          type: "date",
        };
      } else if (index === 5) {
        aggJson = {
          //  法律状态聚类
          size: "",
          field: "legal_status",
          interval: "",
          format: "",
          type: "base",
        };
      } else if (index === 6) {
        aggJson = {
          // ipc聚类
          size: "",
          field: "ipcm",
          interval: "",
          format: "",
          type: "base",
        };
      }
      this.$post(this.$Url.compaines.SingleKind, {
        companyName: this.companyName,
        aggs: aggJson,
        musts: arrNum,
        rangArr: date,
      })
        .then((data) => {
          let result = data.data;
          // console.log(result)
          // 申请日 和 公开/公告日排序
          if (code === "apd" || code === "isd") {
            result.sort((a, b) => {
              return b.key_as_string - a.key_as_string;
            });
          }
          let results = []
            .concat({ fullName: "全部", name: "全部", value: "全部" })
            .concat(result);
          // console.log(results)
          results.forEach((x) => {
            if (x.key === "") {
              x.key = "其它";
            }
          });
          this.$set(this.selectDataList[index], "list", results);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    // 获取专利列表
    getAjaxData(arrNum, date) {
      this.$post(this.$Url.patent.SingleCompany, {
        companyName: this.companyName,
        ipi: this.currentPage,
        ips: this.ips,
        musts: arrNum,
        rang: date,
      })
        .then((data) => {
          this.show = false;
          let result = data.data && data.data.result || []
          result.forEach(v => {
            // this.$set(v, 'title', xmlEscape(v.title))
            v.title = xmlEscape(v.title)
          })
          this.listData = result
          this.isTranslate = [];
          for (let i = 0; i < this.listData.length; i++) {
            this.isTranslate.push("false");
          }

          this.total = data.data.page.totalRow || 0;
          for (let i = 0; i < this.listData.length; i++) {
            let p = this.listData[i].pn;
            let that = this;

            this.getPantentScoreCount(p, function (data) {
              //   console.log(data)
              that.$set(
                that.listData[i],
                "pantentScore",
                data.data ? data.data : "0"
              );
            });
          }
        })
        .catch((error) => {
          this.show = false;
          console.log(error);
        });
    },
    // 获取摘要
    getAbst(pn, fn) {
      this.$post(this.$Url.patent.abst, {
        iopt: 7,
        sf: "QueryAbst",
        spn: pn,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },

    // 重新获取分数 zjs/2020/03/12
    getPantentScoreCount(p, fn) {
      this.$get(this.$Url.patent.pantentScoreCount, {
        pn: p,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },

    // 翻译
    translation(item, index) {
      let transT = this.listData[index].transT || "";
      if (transT !== "") {
        if (this.isTranslate[index] === "false") {
          this.$set(this.isTranslate, index, "true");
        } else {
          this.$set(this.isTranslate, index, "false");
        }
      } else if (transT === "") {
        let pro1 = this.translateFn(item.title);
        pro1.then((res) => {
          this.$set(this.listData[index], "transT", res);
          this.$set(this.isTranslate, index, "true");
        });
      }
    },
    translateFn(text) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.patent.translat, {
          text: text,
        })
          .then((data) => {
            let text = data.data.translation[0].translated[0].text || "";
            resolve(text);
          })
          .catch((err) => {
            reject(err);
          });
      });
      return promise;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  position: relative;
  min-height: calc(100vh - .7rem - 40px - .5rem - .1rem);
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
    .el-card__body {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.el-row {
  background: #fff;
  text-align: left;
}
.vcard-title {
  position: relative;
  padding-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #241c75;
}
.vcard-title i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.tab-info-title {
  padding-left: 0;
  padding: 15px 20px;
  list-style: none;
  border-bottom: 1px solid #e7e6ec;
  > span {
    display: inline-block;
  }
}
.tab-info-title li {
  display: block;
  float: left;
  line-height: 40px;
  font-weight: 600;
  > span {
    display: inline-block;
  }
  > span:last-child {
    width: 150px;
  }
}
.elselect {
  width: 100%;
}
.disputes-list {
  padding-left: 0;
  margin: 10px 20px;
  list-style: none;
  li {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e7e6ec;
    > p {
      width: 100%;
      margin-bottom: 8px;
      > span {
        float: left;
        display: block;
        margin-right: 1%;
        font-size: 12px;
        color: #95959f;
        &:nth-child(1) {
          width: 20%;
        }
        &:nth-child(2) {
          width: 16%;
        }
        &:nth-child(3) {
          width: 30%;
        }
        &:nth-child(4) {
          width: 120px;
        }
        > a {
          line-height: 20px;
          display: block;
          float: left;
        }
        .fontColor {
          color: #514caa;
        }
        i {
          font-style: normal;
        }
      }
    }
  }
  h3 {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    color: #241c75;
    > p {
      position: relative;
      margin-right: 130px;
      color: #51505e;
      > span {
        vertical-align: middle;
        cursor: pointer;
      }
    }
    .score {
      position: absolute;
      top: 0;
      right: 0;
      padding: 4px 14px;
      border-radius: 4px;
      text-align: center;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      color: #fff;
    }
  }
  .translation {
    padding: 2px 7px;
    margin-left: 10px;
    border: 1px solid #4f63c8;
    border-radius: 3px;
    vertical-align: middle;
    font-style: normal;
    font-size: 12px;
    color: $mainColor;
    background-color: #fff;
    cursor: pointer;
    &:hover {
      border-color: #241c75;
      color: #fff;
      background-color: #241c75;
    }
  }
}
.low {
  background-color: #c44b5c;
}
.high {
  background-color: #34ae9b !important;
}
.light {
  color: $mainColor !important;
}
.abstract {
  line-height: 26px;
  margin-top: 8px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  color: #7674a3;
}
.align-center {
  text-align: center;
}
.pagination {
  text-align: center;
  padding-bottom: 20px;
}
.no-patent-tip {
  width: 100%;
  line-height: 1rem;
  padding: .1rem 0;
  font-size: .18rem;
  text-align: center;
  color: $color104;
}
</style>

